import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { FormattedMessage, defineMessages, intlShape, injectIntl } from 'react-intl'
import { SearchBar } from 'antd-mobile'
import _ from 'lodash'
import { CommonHeader } from 'component/header'
import { FunctionSetting, CommoditySort } from './'

const messages = defineMessages({
    placeholderSearch: {
      id: 'placeholderSearch',
      defaultMessage: '搜索外汇'
    }
})

class InterfaceSetting extends Component {
  onComplete = (data) => {
    //console.log(data, 'data')
    let arr = []
    data.forEach((val, index) => {
      let obj = {}
      obj.id = val.id
      obj.ccyPair = val.ccyPair
      arr.push(obj)
    })
    //console.log(arr)
    this.setState({
      arr
    })
  }
  onChartChange = (switch1 = true) => {
    if (switch1 == false) {
      this.setState({
        switch1 : 1
      })
    }
  }
  state = {
    arr : JSON.parse(localStorage.ccy),
    switch1: 0
  }
  render() {
    const placeholderSearch = this.props.intl.formatMessage(messages.placeholderSearch)
    return (
      <div className="rt-interface-setting">
        <CommonHeader
          title={
            <FormattedMessage
              id="set"
            />
          }
          right={
            <FormattedMessage
              id="complete"
            />
          }
          onLeftClick={
            () => {
              if (this.state.switch1) {
                hashHistory.push({
                  pathname: '/trade',
                  query: {
                    switch1: this.state.switch1
                  }
                })
              } else {
                hashHistory.push('/trade')
              }
            }
          }
          onRightClick={
            () => {
              //console.log(1)
              localStorage.setItem('ccy', JSON.stringify(this.state.arr))
              if (this.state.switch1) {
                hashHistory.push({
                  pathname: '/trade',
                  query: {
                    switch1: this.state.switch1
                  }
                })
              } else {
                hashHistory.push('/trade')
              }
            }
          }
        />
        <SearchBar
          placeholder={placeholderSearch}
          cancelText=""
          onFocus={
            () => {
              hashHistory.push('/trade/search')
            }
          }
        />
        <div className="cm-scrollable-container -inner-bg">
          <FunctionSetting onChange={this.onChartChange}/>
          <CommoditySort onComplete={this.onComplete}/>
        </div>
      </div>
    )
  }
}

InterfaceSetting.propTypes = {
  intl: intlShape.isRequired
}

export default injectIntl(InterfaceSetting)